import 'package:ai/page/recharge/CommonUtils.dart';
import 'package:auto_route/annotations.dart';
import 'package:flutter/material.dart';

import '../../config/Config.dart';

@RoutePage()
class RechargePage extends StatefulWidget {
  const RechargePage({super.key});

  @override
  State<RechargePage> createState() => _RechargePageState();
}

class _RechargePageState extends State<RechargePage> {
  late int priceIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                Config.colorEaf2ff,
                Colors.white,
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Stack(
                  children: [
                    Container(
                      padding: const EdgeInsets.only(top: 48),
                      child:
                          Image.asset("asset/images/icon_charge_publicize.png"),
                    ),
                    Positioned(
                      top: 40,
                      child: BackButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ),
                  ],
                ),
                Container(
                  padding: const EdgeInsets.all(16),
                  child: Card(
                    color: Colors.white,
                    elevation: 0,
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 8, right: 16, bottom: 8, top: 16),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: [
                              Text(
                                "会员选择",
                                style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                  color: Config.color46,
                                ),
                              ),
                              InkWell(
                                onTap: () {
                                  CommonUtils.showAlertDialog(context);
                                },
                                child: Text(
                                  "会员权益>",
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                    color: Config.color46,
                                  ),
                                ),
                              ),
                            ],
                          ),
                          const SizedBox(
                            height: 24,
                          ),
                          Stack(
                            children: [
                              GestureDetector(
                                onTap: () {
                                  setState(() {
                                    priceIndex = -1;
                                  });
                                },
                                child: Card(
                                  elevation: 0,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15.0),
                                    side: BorderSide(
                                      color: priceIndex == -1
                                          ? Config.colorF1c9c9
                                          : Config.colorA3,
                                      width: priceIndex == -1 ? 2.0 : 1.0,
                                    ),
                                  ),
                                  color: priceIndex == -1
                                      ? Config.colorFef2f2
                                      : Colors.white,
                                  child: Padding(
                                    padding: const EdgeInsets.all(24),
                                    child: Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceBetween,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              "终身会员",
                                              style: TextStyle(
                                                fontWeight: FontWeight.bold,
                                                fontSize: 16,
                                                color: priceIndex == -1
                                                    ? Config.colorE7233a
                                                    : Config.color34,
                                              ),
                                            ),
                                            const Text("一次付费终身使用"),
                                          ],
                                        ),
                                        Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.center,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.center,
                                          children: [
                                            getPrice(198, priceIndex == -1),
                                            const Text("原价998"),
                                          ],
                                        )
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                              Positioned(
                                left: 4,
                                child: Image.asset(
                                  "asset/images/bg_life_member_coupon_time.png",
                                  width: 48,
                                ),
                              )
                            ],
                          ),
                          GridView.builder(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            gridDelegate:
                                const SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 3,
                                    crossAxisSpacing: 4,
                                    mainAxisSpacing: 4,
                                    childAspectRatio: 0.6),
                            itemCount: 3,
                            itemBuilder: (context, index) {
                              return GestureDetector(
                                onTap: () {
                                  setState(() {
                                    priceIndex = index;
                                  });
                                },
                                child: Card(
                                  elevation: 0,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(15.0),
                                    side: BorderSide(
                                      color: priceIndex == index
                                          ? Config.colorF1c9c9
                                          : Config.colorA3,
                                      width: priceIndex == index ? 2.0 : 1.0,
                                    ),
                                  ),
                                  color: priceIndex == index
                                      ? Config.colorFef2f2
                                      : Colors.white,
                                  child: Center(
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      crossAxisAlignment:
                                          CrossAxisAlignment.center,
                                      children: [
                                        Text(
                                          "一年会员",
                                          style: TextStyle(
                                            fontWeight: FontWeight.bold,
                                            fontSize: 14,
                                            color: Config.color3,
                                          ),
                                        ),
                                        const SizedBox(
                                          height: 8,
                                        ),
                                        getPrice(98, priceIndex == index),
                                        const SizedBox(
                                          height: 8,
                                        ),
                                        getOriginPrice(698),
                                        const SizedBox(
                                          height: 8,
                                        ),
                                        Text(
                                          "0.3元/天",
                                          style: TextStyle(
                                            fontSize: 10,
                                            color: Config.color3e3d3b,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),
                          Card(
                            elevation: 0,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(4.0),
                            ),
                            color: Config.colorEff6ff,
                            child: Padding(
                              padding: const EdgeInsets.all(8),
                              child: Row(
                                children: [
                                  Image.asset(
                                    "asset/images/ic_coupon_limited_exemption.png",
                                    width: 24,
                                  ),
                                  const SizedBox(
                                    width: 8,
                                  ),
                                  Expanded(
                                    child: Text(
                                      "首次购买终身会员领取优惠券立减40元",
                                      style: TextStyle(
                                        fontSize: 12,
                                        color: Config.color3d,
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                          const SizedBox(
                            height: 24,
                          ),
                          const Text(
                            "什么是AI写作?",
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(
                            height: 8,
                          ),
                          Text(
                              style: TextStyle(
                                color: Config.color9c,
                              ),
                              "人工智能(AI)伪原创是基于人工智能、大数据、神经网络和NLP等技 术,从海量媒体内容中深度学习而挖掘推导出智能改编、科学审校的 自动写作平台,既不更改内容的语义,又能生成通过公众号、头条号等 自媒体平台原创检测和百度等搜索引擎收录,为媒体工作者提供一站 式的内容生产服务和工具,全面提升媒体写作的效率."),
                          const SizedBox(
                            height: 24,
                          ),
                          const Text(
                            "温馨提示",
                            style: TextStyle(
                              fontSize: 14,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(
                            height: 8,
                          ),
                          RichText(
                            text: TextSpan(
                              style: TextStyle(
                                color: Config.color9c,
                              ),
                              text: "1、开通会员后",
                              children: [
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.colorD85871,
                                  ),
                                  text: "不支持退款",
                                ),
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.color9c,
                                  ),
                                  text: "，请试用满意后再购买。(虚拟产品不支持退款，详情请查看",
                                ),
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.colorD6994ed,
                                    decoration: TextDecoration.underline,
                                  ),
                                  text: "《消费者权益保护法》",
                                ),
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.color9c,
                                  ),
                                  text: ")",
                                ),
                              ],
                            ),
                          ),
                          RichText(
                            text: TextSpan(
                              style: TextStyle(
                                color: Config.color9c,
                              ),
                              text: "2、若开通会员后",
                              children: [
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.colorD6994ed,
                                  ),
                                  text: "10分钟内",
                                ),
                                TextSpan(
                                  style: TextStyle(
                                    color: Config.color9c,
                                  ),
                                  text: "会员仍然没有到账，请跳转会员中心界面刷新会员或联系客服。",
                                ),
                              ],
                            ),
                          ),
                          RichText(
                            text: TextSpan(
                                style: TextStyle(
                                  color: Config.color9c,
                                ),
                                text: "3、会员时长中,1个月=30天。"),
                          ),
                          RichText(
                            text: TextSpan(
                                style: TextStyle(
                                  color: Config.color9c,
                                ),
                                text: "4、如有其他疑问，请联系客服"),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          )),
      bottomNavigationBar: BottomAppBar(
        height: 120,
        color: Colors.white,
        child: Column(
          children: [
            SizedBox(
              width: double.infinity, // 填充父组件宽度
              child: FilledButton(
                style: ButtonStyle(
                  backgroundColor: WidgetStateProperty.all(
                    Config.color4d75f9,
                  ),
                ),
                onPressed: () {},
                child: const Text("确认协议并支付￥168"),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Checkbox(
                  value: false,
                  activeColor: Config.color597cfe,
                  checkColor: Colors.white,
                  onChanged: (checked) {},
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(24),
                  ),
                ),
                RichText(
                  text: TextSpan(
                      text: "开通前请阅读",
                      style: TextStyle(
                        color: Config.color9e,
                      ),
                      children: [
                        TextSpan(
                          text: "《会员协议》",
                          style: TextStyle(
                            color: Config.color7097dc,
                          ),
                        ),
                      ]),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  Widget getPrice(int price, bool checked) {
    return RichText(
      text: TextSpan(
        text: '￥', // 默认样式的文本
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 12,
          color: checked ? Config.colorE7233a : Config.color34,
        ),
        children: <TextSpan>[
          TextSpan(
            text: "$price", // 加粗文本
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 18,
              color: checked ? Config.colorE7233a : Config.color34,
            ),
          ),
        ],
      ),
    );
  }

  Widget getOriginPrice(int price) {
    return Text(
      "原价$price",
      style: TextStyle(
        fontSize: 12,
        decoration: TextDecoration.lineThrough,
        color: Config.color807c7b,
      ),
    );
  }
}
